<script  lang="ts">
import {defineComponent,watch,watchEffect} from "vue"
import RoomDetail from './components/detail.vue'
import {IRoomDetailParams} from '@/api/interface'
import {useStore} from '@/store'
import {useRoute} from "vue-router";
export default defineComponent({
  components:{
    RoomDetail
  },
  setup(){
    const route = useRoute()
    const store = useStore()
    watch(()=>route.params,(newVal,oldVal)=>{
      store.dispatch('getRoomDetail',newVal)
    })
    watchEffect(()=>store.dispatch('getRoomDetail',route.params))

  },
  //下面的已经将数据存入到了store中 怎么在html中显示出来呢
  asyncData({store,route}:any){//在服务端渲染即数据预取时，会遍历到当前组件存在asyncData函数，执行数据预取即action getRoomList
    console.log('asyncData---详情页',store,route.value)
    const {roomId} = store.state
    const {id} = route.value.params
    console.log('roomId')
    // const {pageNo} = store.state
    return store.dispatch('getRoomDetail',{id:roomId||id} as IRoomDetailParams)
  }
})
</script>

<template>
  <RoomDetail></RoomDetail>
</template>

<style lang="scss">
@import "@/assets/scss/detail/index.scss";
</style>
